<template>
    <div class="container">
        <div class="header">
            <van-image fit="contain" src="/wxchat/images/gyyj.png" />
            <div class="title">
                <span class="text">
                    订单 {{ order.rcvid }} 详情
                </span>
            </div>
            <div class="goBack">
                <router-link :to="{ name: 'store' }">
                    <SvgIcon icon-class="back" />
                </router-link>
            </div>
        </div>
        <div class="body">
            <van-cell-group>
                <van-cell title="采购单号" :value="order.rcvid" />
                <van-cell title="产品编号" :value="order.partid" />
                <van-cell title="适用产品" :value="order.partname" />
                <van-cell title="交货地点" :value="order.place" />
                <van-cell title="交货日期" :label="order.time" />
                <van-cell title="制单人" :value="order.creater" />
            </van-cell-group>

            <van-cell-group v-for="item in order.childs" style="margin-top: 15px;  background-color: #6F6F6F; border-top: solid 2px #6f6f6f;">
                <van-cell title="物料编号" :value="item.partid" />
                <van-cell title="物料名称" :value="item.partname" />
                <van-cell title="规格" :value="item.specs" />
                <van-cell title="数量" :value="item.amount" />
                <van-cell title="单位" :value="item.unit" />
            </van-cell-group>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router'
import router from '@/router';
import { Image as VanImage, Cell as VanCell, CellGroup as VanCellGroup,showNotify } from 'vant';
import { ref, onMounted } from 'vue'
import type { order } from '@/types/data'
import { getBillApi } from '@/api'

var route = useRoute()
const order = ref<order>({
    rcvid: '',
    partid: '',
    partname: '',
    place: '',
    time: '',
    creater: '',
    childs: []
}
    //     {
    //     rcvid: '111111',
    //     partid:'222',
    //     partname:'33',
    //     place:'一厂生产部',
    //     time:'2023-11-01',
    //     childs: [
    //         {
    //             partid: 'IT9502',
    //             partname: '2023-09-24',
    //             specs: '2',
    //             amount: '2',
    //             unit: '0'
    //         },
    //         {
    //             partid: 'IT9502',
    //             partname: '2023-09-24',
    //             specs: '1',
    //             amount: '2',
    //             unit: '0'
    //         }
    //     ]
    // }
)

onMounted(() => {
    let id = route?.params.id
    if (id) {
        getBillApi(id as string).then(({ data }) => {
            console.log(data)
            order.value = data
        }).catch((err) => {
        showNotify(
            { type: 'warning', message: '网路未连接' }
        );
    })
    }
    else {
        router.replace({
            name: '404'
        })
    }
})

</script>
<style lang="scss" scoped>
.el-descriptions {
    margin-top: 20px;
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}
</style>